import Vue from 'vue'

import {DomUtil} from "@lowcode/jpaas-common-lib";

import {I18Parse,CommonLang} from "@lowcode/jpaas-common-lib";
import js from '../../locales/lang/impl/assets/jsLang';
let lang = js;
let i18n=function (langKey,text) {
    return I18Parse.getI18Val(lang.js.directive,langKey, text)
}

Vue.directive('focus', {
    inserted: function (el) {
        el.focus();
    }
})


/**
 * 这个指令的作用是改变全局编辑状态为非编辑,控制文本框按钮为非编辑状态.
 */
Vue.directive('uneditable', {
    bind: function (el, binding, vnode) {
        el.clickEvent = function (event) {
            vnode.context.$store.dispatch("editable/setUnEdit");
        }
        el.addEventListener("click", el.clickEvent)

    },
    unbind: function (el) {
        el.removeEventListener('click', el.clickEvent)
    }
})


/**
 * 选中指令,这个指令的用途是改变行数据的 选中属性.
 * 用法:
 * v-for="(item,index) in items" :key="_idx" v-select="item"
 */
Vue.directive('select', {
    bind: function (el, binding, vnode) {
        el.clickEvent = function (e) {
            var o = binding.value;
            var selected = o.selected;
            o.selected = !selected;
        }
        el.addEventListener("click", el.clickEvent)
    },
    unbind: function (el) {
        el.removeEventListener('click', el.clickEvent)
    }
})


Vue.directive('fieldset', {
    bind: function (el, binding, vnode) {
        function clickHandler(e) {
            var divObj = el.querySelector(".divFieldsetContainer");
            divObj.style.display = (divObj.style.display == "none") ? "" : "none";
            var legend = el._legend;
            var hasClass = DomUtil.hasClass(legend, "icondown");
            if (hasClass) {
                DomUtil.addClass(legend, "iconup");
                DomUtil.removeClass(legend, "icondown");
            } else {
                DomUtil.addClass(legend, "icondown");
                DomUtil.removeClass(legend, "iconup");
            }
        }

        el._clickHandler = clickHandler;

        var childAry = el.childNodes;
        var childs = [];
        for (var i = 0; i < childAry.length; i++) {
            var child = childAry[i];
            if (child.tagName == "LEGEND") {
                var attrs = {class: "icon-button toggleButton icondown", title: i18n('contraction', '展开/收缩')};
                var tmp = DomUtil.createElement("div", attrs);
                el._legend = tmp;

                tmp.addEventListener("click", el._clickHandler)

                child.appendChild(tmp);
            } else {
                childs.push(child);
            }
        }

        var divObj = el.querySelector(".divFieldsetContainer");
        if (!divObj) {
            divObj = DomUtil.createElement("div", {class: "divFieldsetContainer"});
            el.appendChild(divObj);
        }
        if(!binding.value){
            divObj.style.display = "none"
        }
        for (var i = 0; i < childs.length; i++) {
            //Util.createElement
            divObj.appendChild(childs[i]);
        }

    },
    unbind: function (el) {

        el.removeEventListener('click', el._clickHandler);
        delete el._clickHandler;
    }
})


Vue.directive('tabs', {
    bind: function (el, binding, vnode) {
        var itemContainer = el.getElementsByClassName('itemContainer')[0];
        var _children = itemContainer.children;
        for (var i = 0; i < _children.length; i++) {
            _children[i].addEventListener("click", function () {
                var _self = this;
                _children.forEach(function (item, index) {
                    if (_self == item) {
                        item.classList.add("headerActive");
                        var itemContainer = el.getElementsByClassName('itemBox')[0];
                        var bodyItem = itemContainer.children;
                        bodyItem.forEach(function (itm, idx) {
                            if (index == idx) {
                                itm.classList.add("actives");
                            } else {
                                itm.classList.remove("actives");
                            }
                        })
                    } else {
                        item.classList.remove("headerActive");
                    }
                })
            })
        }
    },
    unbind: function (el) {

    }
})